<template>
	<view class="min-picker">
		<view class="min-popup" v-if="show" :class="[show ? 'min-show' : 'min-hide']">
			<view class="min-content" :style="{height:heightRpx+'rpx'}">
				<view class="main-top">
					<view class="picer-top">
						<text @click="cancel" style="color: #606266;">取消</text>
						<text @click="confirm" class="confirm">确认</text>
					</view>
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange"
					style="height:400rpx">
					<picker-view-column>
						<view class="picker item" style="font-size: 16px !important;line-height: 32px;" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker item" style="font-size: 16px !important;line-height: 32px;" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker item" style="font-size: 16px !important;line-height: 32px;" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>
<script>
	const myDate = new Date();
	const year = myDate.getFullYear(); // 获取当前年份
	const month = myDate.getMonth() + 1; // 获取当前月份(0-11,0代表1月所以要加1);
	const day = myDate.getDate(); // 获取当前日（1-31）
	export default {
		name: 'MinPicker',
		props: {
			show: {
				type: Boolean,
				default: false
			},
			startTime: {
				type: Array,
				default: () => [year - 10, 1, 1]
			},
			endTime: {
				type: Number,
				default: year
			},
			heightRpx: {
				type: String
			}
		},
		data() {
			return {
				years: [],
				months: [],
				days: [],
				dayLength: 30,
				value: [0, 0, 0],
				visible: false,
				month: '',
				year: '',
				flag: false,
				indicatorStyle: `height: 34px;`
			}
		},
		mounted() {
			const time = new Date()
			const year = time.getFullYear()
			const month = time.getMonth() + 1
			this.month = month
			this.year = year
			this.getDaysInOneMonth(year, month)
			this.getYears()
			this.getMonth()
			this.getDays()
			// 获取初始位置
			this.value = [this.years.indexOf(this.year), this.months.indexOf(this.month), this.days.indexOf(time
				.getDate())]
		},
		methods: {
			bindChange: function(e) {
				this.flag = true
				this.getDaysInOneMonth(this.years[e.target.value[0]], this.months[e.target.value[1]])
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]] < 10 ? '0' + this.months[val[1]] : this.months[val[1]]
				this.day = this.days[val[2]] < 10 ? '0' + this.days[val[2]] : this.days[val[2]]
				this.getDays()
				if (this.year === this.years[0] && this.startTime[1] && this.startTime[2]) {
					this.getMonth(this.startTime[1])
					return this.getDays(this.startTime[2])
				}
				this.getYears()
				this.getMonth()
				this.getDays()
				// })
			},
			// 获得年份
			getYears() {
				this.years = []
				for (let i = this.startTime[0]; i <= this.endTime; i++) {
					this.years.push(i)
				}
			},
			// 获取月份
			getMonth(min) {
				this.months = []
				// const time = new Date()
				for (let i = min ? min : 1; i <= 12; i++) {
					this.months.push(i)
				}
			},
			getDays(min) {
				this.days = []
				for (let i = min ? min : 1; i <= this.dayLength; i++) {
					this.days.push(i)
				}
			},
			// 获取某年某月多少天
			getDaysInOneMonth(year, month) {
				month = parseInt(month, 10)
				var d = new Date(year, month, 0)
				this.dayLength = d.getDate()
				this.getDays()
				return d.getDate()
			},
			// 取消
			cancel() {
				this.$emit('cancel', false)
			},
			// 确认
			confirm() {
				if (!this.flag) {
					this.$emit('cancel', false)
					this.$emit('confirm', {
						date: this.years[this.value[0]] + '-' + this.months[this.value[1]] + '-' + this.days[this
							.value[2]]
					})
					return
				}
				this.$emit('cancel', false)
				this.$emit('confirm', {
					date: this.year + '-' + this.month + '-' + this.day
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.main-top {
		padding: 0 40rpx;

		.picer-top {
			width: 100%;
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 25px;

			.confirm {
				color: #4899F3;
			}
		}
	}

	.picker {
		text-align: center;
		// line-height: 50rpx;
	}

	.min-popup {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;

		&.min-hide {
			.min-content {
				animation: hide .2s linear forwards;
			}

			.min-content-height {
				animation: hide .2s linear forwards;
			}

		}

		&.min-show {
			.min-content {
				animation: show .2s linear forwards;
			}

			.min-content-height {
				animation: show .2s linear forwards;
			}
		}

		.min-content {
			width: 100%;
			height: 800rpx;
			background: #fff;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 9999;
			overflow: hidden;
			border-radius: 20rpx 20rpx 0 0;
		}

		@keyframes hide {
			100% {
				transform: translateY(100%);
			}

			0% {
				transform: translateY(0);
			}
		}

		@keyframes show {
			0% {
				transform: translateY(100%);
			}

			100% {
				transform: translateY(0);
			}
		}
	}
</style>
